<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Garden Fresh Sandwich Deli and Caterer</title>
    <link rel="stylesheet" href="deli.css" type="text/css" />
    <script type="text/javascript" src="deli.js"></script>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  </head>
  <body>
    <div id="page-container">
      <h1 id="banner">Garden Fresh Sandwich Deli and Caterer</h1>
      <div id="menu-container">
        <p id="instructions">Select your sandwich by typing the quanatities in the boxes below:</p>
        <form method="get" action="#" id="poorboy-form" class="poorboy" title="Select a garden fresh poorboy">
          <h2 id="poorboy-title">Garden Fresh Poorboy</h2>
          <table border="0" cellpadding="5" cellspacing="0">
            <tbody>
              <tr><th>Quantity</th><th>Meat</th><th>Cheese</th><th>Spread</th><th>Veggies</th></tr>
              <tr>
                <td valign="top"><input name="quantity" size="5" type="text" /></td>
                <td valign="top">
                  <select name="meat">
                    <option value="Ham" selected="selected">Ham</option>
                    <option value="RoastBeef">Roast beef</option>
                    <option value="Turkey">Turkey</option>
                  </select>
                </td>
                <td valign="top">
                  <select name="cheese">
                    <option value="Swiss" selected="selected">Swiss</option>
                    <option value="American">American</option>
                    <option value="Provalone">Provalone</option>
                    <option value="None">None</option>
                  </select>
                </td>
                <td valign="top">
                  <select name="spread">
                    <option value="Mayonnaise" selected="selected">Mayonnaise</option>
                    <option value="Mustard">Mustard</option>
                    <option value="None">None</option>
                  </select>
                </td>
                <td valign="top" rowspan="2">
                  <label for="lettuceid">
                    <input name="lettuce" id="lettuceid" type="checkbox" class="veggies"/>Lettuce
                    </label>
                  <br />
                  <label for="tomatoid">
                    <input name="tomato" id="tomatoid" type="checkbox" class="veggies"/>Tomato
                  </label>
                  <br />
                  <label for="onionid">
         	          <input name="onion" id="onionid" type="checkbox" class="veggies"/> Onion
                  </label>
                  <br />
                  <label for="italian-peppersid">
         	          <input name="italian-peppers" id="italian-peppersid" type="checkbox" class="veggies"/>Italian peppers
                  </label>
                  <br />
                  <label for="kalamata-olivesid">
         	          <input name="kalamata-olives" id="kalamata-olivesid" type="checkbox" class="veggies"/>Kalamata olives
                  </label>
                </td>
                <td valign="top">
        	        <input name="price" size="6" readonly="readonly" value="4.99" type="text" />
                </td>
              </tr>
              <tr>
                <td id="poorboy-quantity-error" class="error" valign="top" colspan="4">&nbsp;</td>
              </tr>
            </tbody>
          </table>
          <table class="add-item-button">
            <tr>
              <td id="poorboy-submit-msg">&nbsp;</td>
              <td><input value="Add poorboy to order" type="submit" id="poorboy-submit-button" class="poorboy" /></td>
            </tr>
          </table>
        </form>
        <form method="get" action="#" id="grill-form" class="grill" title="Select a sandwich from the grill">
          <h2 id="grill-title">From the Grill</h2>
          <table border="0" cellpadding="5" cellspacing="0">
            <tbody>
              <tr>
                <td valign="top"><input name="quantity" size="5" type="text" /></td>
                <td valign="top">
                  <select name="meat">
                    <option value="Burger" selected="selected">Burger</option>
                    <option value="Chicken">Chicken</option>
                    <option value="Veggie">Veggie Burger</option>
                  </select>
                </td>
                <td valign="top">
                  <select name="cheese">
                    <option value="Mozarella" selected="selected">Mozarella</option>
                    <option value="Cheddar">Cheddar</option>
                    <option value="Monterey-Jack">Monterey Jack</option>
                    <option value="Swiss">Swiss</option>
                    <option value="American">American</option>
                    <option value="Provalone">Provalone</option>
                    <option value="None">None</option>
                  </select>
                </td>
                <td valign="top">
                  <select name="spread">
                    <option value="Basil pesto sauce" selected="selected">Basil pesto sauce</option>                
                    <option value="Ketchup">Ketchup</option>
                    <option value="BBQ-Sauce">BBQ Sauce</option>
                    <option value="Mayonnaise">Mayonnaise</option>
                    <option value="Mustard">Mustard</option>
                    <option value="None">None</option>
                  </select>
                </td>
                <td valign="top" rowspan="2">
                  <label for="bellpeppersid">
                    <input name="bellpeppers" id="bellpeppersid" type="checkbox" class="veggies"/>Bell peppers
                    </label>
                  <br />
                  <label for="onionsid">
                    <input name="onions" id="onionsid" type="checkbox" class="veggies"/>Onions
                  </label>
                  <br />
                  <label for="zucchiniid">
         	          <input name="zucchini" id="zucchiniid" type="checkbox" class="veggies"/>Zucchini
                  </label>
                </td>
                <td valign="top">
        	        <input name="price" size="6" readonly="readonly" value="4.99" type="text" />
                </td>
              </tr>
              <tr>
                <td id="grill-quantity-error" class="error" colspan="4" valign="top">&nbsp;</td>
              </tr>
            </tbody>
          </table>
          <table class="add-item-button">
            <tr>
              <td id="grill-submit-msg">&nbsp;</td>
              <td><input value="Add grill item to order" type="submit" id="grill-submit-button" class="grill" /></td>
            </tr>
          </table>
        </form>
        <form method="get" action="#" id="order-form" title="Enter catering information and complete order">
          <h2 id="catering-title">For catering orders: <input name="deliver" type="checkbox" />Please deliver to the address below.</h2>
          <table border="0" cellpadding="5" cellspacing="0">
            <tr><td>Event date:<br /><span class="required-text">MM/DD/YYYY</span></td><td colspan="4"><input name="date" type="text" size="50" /></td><td id="date-error" class="error">&nbsp;</td></tr>
            <tr><td>First Name:</td><td colspan="4"><input name="first-name" type="text" size="50" /></td><td id="fname-error" class="error">&nbsp;</td></tr>
            <tr><td>Last Name:</td><td colspan="4"><input name="last-name" type="text" size="50" /></td><td id="lname-error" class="error">&nbsp;</td></tr>
            <tr><td>Street:</td><td colspan="4"><input name="street" type="text" size="50" /></td><td id="street-error" class="error">&nbsp;</td></tr>
            <tr><td>City:</td><td><input name="city" type="text" size="30" /></td>
              <td>State:</td>
              <td>
                <select name="state">
	                <option value="AL">AL</option>
                  <option value="AK">AK</option>
                  <option value="AZ">AZ</option>
                  <option value="AR">AR</option>
                  <option value="CA">CA</option>
                  <option value="CO">CO</option>
                  <option value="CT">CT</option>
                  <option value="DE">DE</option>
                  <option value="DC">DC</option>
                  <option value="FL">FL</option>
                  <option value="GA">GA</option>
                  <option value="HI">HI</option>
                  <option value="ID">ID</option>
                  <option value="IL">IL</option>
                  <option value="IN">IN</option>
                  <option value="IA">IA</option>
                  <option value="KS">KS</option>
                  <option value="KY">KY</option>
                  <option value="LA">LA</option>
                  <option value="ME">ME</option>
                  <option value="MD">MD</option>
                  <option value="MA">MA</option>
                  <option value="MI">MI</option>
                  <option value="MN">MN</option>
                  <option value="MS">MS</option>
                  <option value="MO">MO</option>
                  <option value="MT">MT</option>
                  <option value="NE">NE</option>
                  <option value="NV">NV</option>
                  <option value="NH">NH</option>
                  <option value="NJ">NJ</option>
                  <option value="NM">NM</option>
                  <option value="NY">NY</option>
                  <option value="NC">NC</option>
                  <option value="ND">ND</option>
                  <option value="OH">OH</option>
                  <option value="OK">OK</option>
                  <option value="OR">OR</option>
                  <option value="PA">PA</option>
                  <option value="RI">RI</option>
                  <option value="SC">SC</option>
                  <option value="SD">SD</option>
                  <option value="TN">TN</option>
                  <option value="TX" selected="selected">TX</option>
                  <option value="UT">UT</option>
                  <option value="VT">VT</option>
                  <option value="VA">VA</option>
                  <option value="WA">WA</option>
                  <option value="WV">WV</option>
                  <option value="WI">WI</option>
                  <option value="WY">WY</option>
                </select>
              </td>
              <td>Zip Code:</td><td><input name="zip" type="text" size="10" /></td></tr> 
              <tr><td></td><td id="city-error" class="error">&nbsp;</td><td></td><td id="state-error" class="error">&nbsp;</td><td></td><td id="zip-error" class="error">&nbsp;</td></tr>
          </table>
          <p class="required-text">(All fields are required.)</p>
          <div id="submit"><input value="Create Order" type="submit" id="submit-id"/><br /><span id="submit-error">&nbsp;</span></div>
        </form>
      </div>
      <div id="footer">
        <p id="store-address">
          2700 Bay Area Blvd.<br />
          Houston, TX 77058<br />
          281-283-7600
        </p>
        <p id="validation">
          <a href="http://validator.w3.org/check?uri=referer">
          <img
             src="http://www.w3.org/Icons/valid-xhtml10"
             alt="Valid XHTML 1.0 Strict" height="31" width="88" />
          </a>
        </p>
      </div>
    </div>
  </body>
</html>
